<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    // Java代码放这里
%>
<!DOCTYPE html>
<html>
<head>
    <!-- 导入资源 -->
    <%@ include file="resource.jsp" %>
    <!-- Javascript代码放这里 -->
    <script>
        $(document).ready(function () {

            $("#username").focus();

            $("#btn1").click(function () {
                $("#img1").attr("src", "captcha.do?r=" + Math.random());
                return false;
            });

            $("#submitBtn").click(function () {
                let pass = true;
                let username = $("#username");
                let password = $("#password");
                let captcha = $("#captcha");
                if (username.val() != null && username.val().trim().length >= 4 && username.val().trim().length <= 20) {
                    username.attr("class", "form-control is-valid");
                } else {
                    pass = false;
                    username.attr("class", "form-control is-invalid");
                }
                if (password.val() != null && password.val().trim().length >= 4 && password.val().trim().length <= 20) {
                    password.attr("class", "form-control is-valid");
                } else {
                    pass = false;
                    password.attr("class", "form-control is-invalid");
                }
                if (captcha.val() != null && captcha.val().trim().length == 4) {
                    captcha.attr("class", "form-control is-valid");
                } else {
                    pass = false;
                    captcha.attr("class", "form-control is-invalid");
                }
                //alert(username + pass);
                return pass;
            });
        });

    </script>
    <!-- 自定义样式放这里 -->
    <style></style>
</head>
<body>
<!-- 导入页头 -->
<%@ include file="header.jsp" %>

<div class="container" style="margin: 24px auto;">
    <div class="row">
        <div id="main" class="col-md-12">

            <p>
                <a href="index.jsp">Home</a>
                >>
                <a href="signin.jsp">Sign In</a>
            </p>
        </div>
    </div>
</div>


<form action="user-signin.do" method="post" style="width: 640px; margin: 0 auto;">
    <div class="row my-4 g-3 align-items-center">
        <div class="col-auto">
            <label for="username" class="col-form-label">Username</label>
        </div>
        <div class="col-auto">
            <input type="text" id="username" name="username"
                   class="form-control">
        </div>
        <div class="col-auto">
            <span class="form-text"> Must be 4-20 characters long. </span>
        </div>
    </div>
    <div class="row my-4 g-3 align-items-center">
        <div class="col-auto">
            <label for="password" class="col-form-label">Password</label>
        </div>
        <div class="col-auto">
            <input type="password" id="password" name="password"
                   class="form-control">
        </div>
        <div class="col-auto">
			<span id="passwordHelpInline" class="form-text"> Must be
				4-20 characters long. </span>
        </div>
    </div>
<%--    <div class="row my-4 g-3 align-items-center">--%>
<%--        <div class="col-auto">--%>
<%--            <label for="password2" class="col-form-label">Confirm--%>
<%--                &nbsp;&nbsp; </label>--%>
<%--        </div>--%>
<%--        <div class="col-auto">--%>
<%--            <input type="password" id="password2" name="password2"--%>
<%--                   class="form-control">--%>
<%--        </div>--%>
<%--        <div class="col-auto">--%>
<%--            <span class="form-text"> Confirm your password. </span>--%>
<%--        </div>--%>
<%--    </div>--%>
    <div class="row my-4 g-3 align-items-center">
        <div class="col-auto">
            <label for="captcha" class="col-form-label">Captcha
                &nbsp;&nbsp; </label>
        </div>
        <div class="col-auto">
            <input type="text" id="captcha" name="captcha"
                   class="form-control">
        </div>
        <div class="col-auto">
            <span class="form-text"> Must be 4 characters long. </span>
        </div>
    </div>
    <div class="row my-4 g-3 align-items-center">
        <div class="col-auto">
            <button id="btn1" class="btn">
                <img id="img1" src="captcha.do" style="width: 220px;"/>
                &nbsp;Refresh
            </button>
        </div>
    </div>
    <button id="submitBtn" class="btn btn-primary">Submit</button>
</form>

<!-- 导入页脚 -->
<%@ include file="footer.jsp" %>
</body>
</html>